<template>
    <div class="Cropper" v-show="cropperImg">
        <div class="cropper-container">
            <div class="cropper-el">
                <VueCropper ref="cropper" :img="cropperImg" :output-size="option.size" :output-type="option.outputType"
                    :info="true" :full="option.full" :fixed="fixed" :can-move="option.canMove"
                    :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox" :original="option.original"
                    :auto-crop="option.autoCrop" :auto-crop-width="optionWidth" :auto-crop-height="optionHeigth"
                    :center-box="option.centerBox" @real-time="realTime" :high="option.high" @img-load="imgLoad"
                    mode="cover" :max-img-size="option.max"></VueCropper>
            </div>
            <div class="bottom">
                <a-button @click="clearfinish">
                    取消裁剪
                </a-button>
                <a-button type="primary" @click="finish">
                    确定裁剪
                </a-button>
            </div>
        </div>
    </div>
</template>
 
<script lang="ts">
import { onBeforeMount, ref, toRefs, watch } from 'vue';
import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper';
export default {
    name: "Cropper",
    setup(props, { emit }) {
        const { cropperImg } = toRefs(props);
        const previews = ref(false);
        const cropper = ref();
        const option = ref({
            // img: this.cropperImg,
            size: ref(1),
            full: ref(false),
            outputType: ref("png"),
            canMove: ref(true),
            fixedBox: ref(true),
            original: ref(false),
            canMoveBox: ref(true),
            autoCrop: ref(true),
            // 只有自动截图开启 宽度高度才生效
            autoCropWidth: ref(900),
            autoCropHeight: ref(600),
            centerBox: ref(true),
            high: ref(true),
            max: ref(99999)
        });
        const show = ref(true);
        const fixed = ref(false);
        const modelSrc = ref("");
        const realTime = (data: any) => {
            previews.value = data;
        };
        const imgLoad = (e: any) => {
            if (e === "success") {
                console.log("裁剪成功");
            }
        };
        const finish = () => {
            cropper.value.getCropBlob((data: any) => {
                let img = window.URL.createObjectURL(data);
                modelSrc.value = img;
                const files = new window.File([data], Date.parse(new Date() as any) + ".png", { type: data.type }) as any;
                files.url = window.URL.createObjectURL(data);
                emit("getCrofile", files);
            });
        };
        const clearfinish = () => {
            emit("clear");
        };
        return { previews, cropper, option, show, fixed, modelSrc, realTime, imgLoad, finish, clearfinish };
    },
    props: {
        cropperImg: {
            type: String
        },
        optionWidth: {
            // 裁剪框宽
            default: 750
        },
        optionHeigth: {
            // 裁剪高宽
            default: 300
        },
        fixedNumber: {
            default: () => [1.5, 1]
        }
    },
    components: { VueCropper }
}
</script>
 
<style lang="less" scoped>
.Cropper {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    background-color: #fff;

    .cropper-el {
        width: 70vw;
        height: 70vh;
        margin: 30px auto;
    }

    .bottom {
        width: 100%;
        text-align: center;
    }
}
</style>